{% if values | length > 0 %}
    <div class="row {% if classes %}{{ classes }}{% else %}variable{% endif %}"{% if id %} id="{{ id }}"{% endif %}>
        <ul class="nav nav-tabs" role="tablist">
            {% for key, value in values.items() %}
                <li role="presentation"{% if loop.first %} class="active"{% endif %}>
                    <a href="#{{ anchor_id }}-{{ key }}"
                       aria-controls="{{ anchor_id }}-{{ key }}"
                       role="tab"
                       data-toggle="tab">{{ value['name'] }}</a>
                </li>
            {% endfor %}
        </ul>

        <div class="tab-content">
            {% for key, value in values.items() %}
            <div role="tabpanel" class="tab-pane col-sm-12{% if loop.first %} active{% endif %}" id="{{ anchor_id }}-{{ key }}">
                {% if 'matrix' in value %}
                    <img src="{{ value['matrix'] }}" class="img-responsive center-img" alt="{{ value['name'] }}">
                {% elif 'value' in value %}
                    {{ value['value'] }}
                {% elif 'content' in value %}
                    {{ value['content'] | safe }}
                {% endif %}
            </div>
            {% endfor %}
        </div>
    </div>
{% endif %}